<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        .wrap{
            position: sticky;
            z-index: 2；
            }
        .wrap a{
            margin: 25px 20px;
            color: rgb(34, 32, 32);
            font-size: 10px;
            position: absolute;
            top: -20%;
            transform: translateX(50%) translateY(-50%);
            right: 20px;
        }
        .wrap{
            position: relative;
        }
        .header img{
             width: 100%;
             height: 700px;
             list-style: none;
             margin: -58px 0px auto
        }
        .logo{
            width: 100%;
            height: 50px;
            background-color:rgba(255,255,255,0.8);
        }
        .logo img{
            display: inline-block;
            vertical-align: middle;
            height: 45px;
            margin: 4px 0px -21px 175px;
            float: left;
        }
        .logo li a{
                margin: 25px 65px 0px;
                float: left;
                width: 43px;
                height: 19px;
                font-size: 14px;
                position: relative;
                text-decoration: none;
        }
        a:nth-of-type(2){
            margin-top: 45px;
        }
        .box{
            width: 1300px;
            height: 550px;
            margin: 100px auto;
            border: 1px solid #dbdbdb;
            position: relative;
        }
        .box img{
            position: absolute;
            left: 0;
            width: 800px;
            height: 462px;
            margin:40px 150px;
        }
        .box h3{
                margin:-150px 0px 0px 0px;
                text-align:left;
                width: 142px;
                height: 30px;
                margin-right: 10px;
                position: absolute;
               top: 50%;
               right: 20px; 
               font-size: 40px;
        }
        .box h4{
            margin:60px 0px 0px 0px;
                text-align:left;
                width: 142px;
                height: 30px;
                margin-right: 10px;
                position: absolute;
               top: 50%;
               right: 20px; 
               font-size: 40px;
        }
        .img{
            width: 79px;
            height: 79px;
            position: absolute;
            background: url(images/pic5.jpg) no-repeat;
            top: 59%;
            right: 190px; 
        }
        .img2{
            width: 79px;
            height: 79px;
            position: absolute;
            background: url(images/pic5.jpg) no-repeat;
            top: 21%;
            right: 190px; 
        }
        .box2{
            padding: 75px 0 45px 20px ;
    background: #fff url(../新建文件夹/images/pic9.jpg) top 480px center no-repeat;
    background-size: 100% auto;
        }
        .box3{
            text-align: center;
        }
        .box3 h1:before{
            content: '';
            display: inline-block;
            vertical-align: middle;
            margin-top: -2px;
            width: 30px;
            height: 1px;
            background: #de3635;
            border: 1px solid #ea7c7c;
        }
        .box3 h1:after{
            content: '';
            display: inline-block;
            vertical-align: middle;
            margin-top: -2px;
            width: 30px;
            height: 1px;
            background: #de3635;
            border: 1px solid #ea7c7c;
        }
        .box3 h1{
         font-size: 40px;
         color: #666;
         font-weight: 300;
         font-family: "Microsoft YaHei";
        }
            .picture{
                width: 1300px;
                height: 685px;
                margin:100px auto;
                position: relative;
                /* 超出范围隐藏 */
                overflow: hidden;
            }
            .picture ol{
                position: absolute;
                bottom:10px;
                left: 50%;
                /* translateX设置百分比，参照物是自身的宽度 */
                transform: translateX(-50%);
            }
            .picture ol li{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background:white;
                float: left;
                margin:0px 4px;
                cursor: pointer;
            }
            .picture span{
                position: absolute;
                top:50%;
                transform: translateY(-50%);
                background: rgba(255,255,255,0.8);
                cursor: pointer;
            }
            .picture span:nth-of-type(1){
                left:10px;
            }
            .picture span:nth-of-type(2){
                right:10px;
            }
            picture .current{
                background: #f60;
            }
            .bo li img{
                width: 1300px;
                height: 685px;
            }
            .bo li{
                float: left;
            }
            .bo{
                width: 9999px;
            }
    </style>
</head>
<body>
    <div class="wrap">
        <a href="html/登陆.html" target="_blank">登陆</a>
        <a href="">注册</a>
        <div class="logo">
            <h1>
                <img src="images/pic2.jpg" alt="">
            </h1>
            <ul>
                <li>
                    <a href="1.html">首页</a>
                </li>
                </a>
                <li>
                    <a href="html/肠粉.html">肠粉</a>
                </li>
                <li>
                    <a href="html/艇仔粥.html">艇仔粥</a>
                </li>
                <li>
                    <a href="html/虾饺.html">虾饺</a>
                </li>
                <li>
                    <a href="html/糯米鸡.html">糯米鸡</a>
                </li>
                <li>
                    <a href="html/蒸排骨.html">蒸排骨</a>
                </li>
                <li>
                    <a href="html/凤爪.html">凤爪</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="header">
    <img src="images/pic1.jpg" alt="">
    </div>
    <div class="box2">
    <div class="box">
        <img src="images/pic4.jpg" alt="">
        <ul>
            <li>
                <a href="html/历史.html">
                <h3>历史</h3>
                </a>
                <a href="html/文化.html">
                <h4>文化</h4>
                </a>
                <div class="img"></div>
                <div class="img2"></div>
            </li>
        </ul>
    </div>
    
    <div class="box3">
        <h1>
            品类
        </h1>
    </div>
    <div id="picture" class="picture">
        <!-- 引入图片 -->
        <ul id="bo" class="bo">
            <li>
                <img src="images/pic10.jpg" alt="">
            </li>
            <li>
                <img src="images/pic11.jpg" alt="">
            </li>
            <li>
                <img src="images/pic13.jpg" alt="">
            </li>
            <li>
                <img src="images/pic12.jpg" alt="">
            </li>
        </ul>
        <!-- ol>li实现有序列表 实现小圆点布局 -->
        <ol id="list">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <!-- 左右 -->
        <span id="left">左</span>
        <span id="right">右</span>
        <script>
            // 获取id
            var box=document.getElementById('bo');
            var wrap=document.getElementById('picture');
            var left=document.getElementById('left');
            var right=document.getElementById('right');
            // a.children选择a的子级,得到的是一个类数组
            var list=document.getElementById('list').children;
            // 初始化变量
            var num=0;
            var timer;
            // 把重复代码封装起来
            function fn(){
                // 定时器
                timer=setInterval(function(){
                    num++;
                    if(num>3){
                        num=0;
                    }
                    // ul移动  常量和变量中间使用+拼接
                    box.style.transform='translate('+(-1300*num)+'px)';
                    // 排他
                    for(var i=0;i<list.length;i++){
                        list[i].className='';
                    }
                    // 控制小圆点
                    list[num].className='current'

                },1000)
            }
            fn()

            // 鼠标移入
            wrap.onmouseenter=function(){
                // 停止定时器
                clearInterval(timer);
            }
            // 鼠标移出
            wrap.onmouseleave=function(){
                fn()
            }

            // 小圆点绑定点击事件
            for(var n=0;n<list.length;n++){
                // 自定义属性,和图片移动联系起来
                list[n].zsh=n;
                list[n].onclick=function(){
                     // 排他
                    for(var i=0;i<list.length;i++){
                        list[i].className='';

                    }
                    this.className='current'
                    // 获取自定义属性
                    num=this.zsh
                    box.style.transform='translate('+(-1300*num)+'px)';
                }
            }
            // 点击右边的按钮
            right.onclick=function(){
                    num++;
                    if(num>3){
                        num=0;
                    }
                    // ul移动  常量和变量中间使用+拼接
                    box.style.transform='translate('+(-1300*num)+'px)';
                    // 排他
                    for(var i=0;i<list.length;i++){
                        list[i].className='';
                    }
                    // 控制小圆点
                    list[num].className='current'                  
            }
            // 点击左边的按钮
            left.onclick=function(){
                    num--;
                    if(num<0){
                        num=3;
                    }
                    // ul移动  常量和变量中间使用+拼接
                    box.style.transform='translate('+(-1300*num)+'px)';
                    // 排他
                    for(var i=0;i<list.length;i++){
                        list[i].className='';
                    }
                    // 控制小圆点
                    list[num].className='current'
                
            }
        </script>
    </div>
</body>
</html>